<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 600px;
        border: 2px solid red;
        margin: 50px auto;
      }

      .box .header {
        display: flex;
      }

      .box .header div {
        padding: 10px;
      }

      .box ul li {
        display: flex;
        list-style-type: none;
        padding: 6px;
      }

      .box ul li div,
      .box ul li span,
      .box ul li input {
        padding: 2px 8px;
      }

      .box ul li .step input {
        width: 40px;
        outline: 0;
      }

      .box ul li .step button {
        width: 30px;
      }

      .box .footer {
        display: flex;
        justify-content: space-between;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div class="header">
        <div>
          <input type="checkbox" id="checkAll" v-model="isCheckAll" />全选
        </div>
        <div>商品</div>
        <div>数量</div>
        <div>单价（元）</div>
        <div>金额（元）</div>
        <div>操作</div>
      </div>
      <ul id="goodsList">
        <li v-for="(good,index) in goods" :key="good.id">
          <!-- vue框架中：属性名=true，属性值是布尔值来决定是否显示此属性 -->

          <!-- 
            :checked="good.isCheck"
            @change="toggleCheck(index)" 
          -->
          <input type="checkbox" class="check" v-model="good.isCheck" />
          <span>{{good.goodName}}</span>
          <div class="step">
            <!-- 
               <button v-show="good.number !== 1" class="dec" @click="dec(index)">-</button>
            -->
            <button
              class="dec"
              @click="dec(index)"
              :disabled="good.number === 1"
            >
              -
            </button>
            <input type="text" :value="good.number" class="num" />
            <button class="inc" @click="inc(index)">+</button>
          </div>
          <span class="single-price">¥{{ good.price }}</span>
          <span class="total-price">¥{{ good.price * good.number}}</span>
          <span class="del" @click="deleteGood(index)">删除</span>
          <span class="del" @click="deleteGood2(good.id)">删除</span>
        </li>
      </ul>

      <h3 v-if="goods.length === 0" style="text-align: center">
        你的购物车空空如也
      </h3>

      <div class="footer" v-if="goods.length > 0">
        <span id="deleleAll" @click="deleteCheckedGood">删除所选商品</span>
        <div>
          <span id="selectedNumber"
            >{{ checkedNumber1 + ' ' + checkedNumber2 }}</span
          >
          <span>件商品总计（不含运费）</span>
        </div>

        <span>
          <span>¥</span>
          <span id="totalPriceAll">{{ totalPrice }}</span>
        </span>
      </div>
    </div>

    <script src="./vue.min.js"></script>
    <script>
      new Vue({
        el: '#box',
        data: {
          goods: [
            {
              id: 1,
              isCheck: true,
              goodName: 'iphone6',
              price: 800,
              number: 10,
            },
            {
              id: 2,
              isCheck: false,
              goodName: '华为meta70',
              price: 1000,
              number: 11,
            },
            {
              id: 3,
              isCheck: true,
              goodName: '华为meta80',
              price: 1200,
              number: 12,
            },
            {
              id: 4,
              isCheck: false,
              goodName: '华为meta90',
              price: 1400,
              number: 13,
            },
          ],
        },
        computed: {
          // 方式1：计算选中的商品数量
          checkedNumber1() {
            let total = 0
            this.goods.forEach((good) => {
              if (good.isCheck) {
                total += 1
              }
            })
            return total
          },
          // 方式2：计算选中的商品数量
          checkedNumber2() {
            return this.goods.reduce((result, good) => {
              if (good.isCheck) {
                result += 1
                return result
              }
              return result
            }, 0)
          },

          // 计算出选中的总价
          totalPrice() {
            return this.goods.reduce((result, good) => {
              if (good.isCheck) {
                result += good.number * good.price
                return result
              }
              return result
            }, 0)
          },
          // 计算出全选的状态
          isCheckAll: {
            get() {
              // getter函数
              console.log('isCheckAll-getter')
              return (
                this.goods.every((good) => good.isCheck) &&
                this.goods.length > 0
              )
            },
            set(bool) {
              console.log('isCheckAll-setter', bool)
              this.goods.forEach((good) => {
                good.isCheck = bool
              })
            },
          },
        },
        methods: {
          deleteCheckedGood() {
            if (!confirm('确认删除所选商品吗')) {
              return
            }
            let newGoods = this.goods.filter((good) => !good.isCheck)
            this.goods = newGoods
          },
          deleteGood(index) {
            if (!confirm('确认删除吗')) {
              return
            }
            // 方案1：删除
            this.goods.splice(index, 1)
          },
          deleteGood2(id) {
            if (!confirm('确认删除吗')) {
              return
            }
            // 方案2：删除
            let newGoods = this.goods.filter((good) => good.id !== id)
            // console.log(newGoods)
            this.goods = newGoods
          },
          inc(index) {
            this.goods[index].number += 1
          },
          dec(index) {
            if (this.goods[index].number === 1) {
              return
            }
            this.goods[index].number -= 1
          },
          toggleCheck(index) {
            this.goods[index].isCheck = !this.goods[index].isCheck
          },
        },
      })
    </script>
  </body>
</html>
